<template>
  <a-modal v-model:visible="visible" width="45vw" title="修改已选承租人信息" :mask-closable="false" unmount-on-close>
    <page-form :model="modalForm" ref="modalFormRef" :rules="modalRules" auto-label-width>
      <page-form-row gutter="24">
        <page-form-item field="memberName" label="承租人" :size="'1/2'">
          <i-input :max-length="50" v-model="modalForm.memberName" />
        </page-form-item>
        <page-form-item field="memberPhone" label="联系电话" :size="'1/2'">
          <i-input @clear="isAlreadyExists = false" @input="isAlreadyExists = false" v-model="modalForm.memberPhone" :max-length="11" />
        </page-form-item>
      </page-form-row>
    </page-form>
    <a-button v-if="isCommonContract && isAlreadyExists" @click="changeMemberFn" type="text" size="mini"
      >使用此手机号的承租人生成合同</a-button
    >
    <template #footer>
      <a-space>
        <a-button @click="close">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, watchEffect } from 'vue'
  import { editMemberInfo as shortEditMemberInfo } from '@/api/order/sOrder'
  import { checkMemberPhone, editMemberInfo as longEditMemberInfo } from '@/api/order/czsOrder'
  import { Modal, Notification } from '@arco-design/web-vue'
  const emits = defineEmits(['ok', 'changeMember'])
  const props = defineProps({
    orderType: {
      type: String,
      default: 'sOrder',
    },
    mode: {
      type: String,
      default: 'updateMember',
    },
    isCommonContract: {
      type: Boolean,
      default: false,
    },
  })
  const fetchAPI = props.orderType == 'sOrder' ? shortEditMemberInfo : longEditMemberInfo
  const modalFormRef = ref()
  const modalForm = ref({
    memberName: '',
    memberPhone: '',
  })

  const visible = ref(false)
  const modalRules = ref({
    memberPhone: [
      { required: true, message: '请输入联系电话' },
      { minLength: 11, match: /^[0-9]+$/, message: '仅支持数字，长度11位' },
    ],
    memberName: { required: true, message: '请输入承租人' },
  })

  const orderInfo = ref({})
  const open = (record) => {
    orderInfo.value = record
    visible.value = true
    // 初始化
    modalForm.value = {
      id: record.memberId,
      memberName: record.memberName,
      memberPhone: record.memberPhone,
    }
  }
  const close = () => {
    visible.value = false
  }

  const onConfirm = () => {
    modalFormRef.value.validate((error) => {
      okLoading.value = true
      if (!error) {
        fetchSubmit()
      } else {
        okLoading.value = false
      }
    })
  }
  // 访问api
  const fetchSubmit = () => {
    const orderInfoVal = orderInfo.value
    const param = {
      id: orderInfoVal.id,
      clientId: orderInfoVal.clientId,
      memberId: orderInfoVal.memberId,
      memberPhone: modalForm.value.memberPhone,
      memberName: modalForm.value.memberName,
    }
    fetchAPI(param)
      .then(() => {
        visible.value = false
        Notification.success('保存成功')
        emits('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }
  const okLoading = ref(false)
  const isAlreadyExists = ref(false)
  const changeMemberFn = () => {
    emits('changeMember', {
      memberName: modalForm.value.memberName,
      memberPhone: modalForm.value.memberPhone,
    })
  }
  watchEffect(() => {
    visible.value && (isAlreadyExists.value = false)
  })

  defineExpose({
    open,
    close,
  })
</script>
<style lang="less" scoped></style>
